<template>
  <TheHeader :list="list" @search="getResultHttp" />
  <TheMain :list="list" @delete-item="deleteItem" />
</template>
<script setup>
import TheHeader from './components/TheHeader.vue'
import TheMain from './components/TheMain.vue'
import { getMusicList, getSearchResult } from './api/getData'
import { ref, onMounted } from 'vue'
const list = ref([])
onMounted(() => {
  getMusicData()
})
async function getMusicData() {
  await getMusicList().then((res) => {
    list.value = res.data.playlists
  })
}
function getResultHttp(keywords) {
  getSearchResult({
    keywords,
  }).then((res) => {
    console.log(res.data.result.songs)
    list.value = res.data.result.songs
  })
}
function deleteItem(index) {
  list.value.splice(index, 1)
}
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
</style>
